.theme-switch {
  @apply inline-block my-16;

  &--toggle {
    @apply clean-btn flex items-center p-8 bg-transparent border rounded-full;
  }

  &--label {
    @apply mx-8 text-14 font-semibold;
  }

  .swatch {
    @apply border;
    
    &::before {
      @apply opacity-0;
    }
  }
}

.swatch {
  @apply relative p-0 block rounded-full w-20 h-20;
  background-color: var(--swatchColor);
    
  /* ring */
  &::before {
    @apply absolute inset-0 rounded-full opacity-10 border;
    border-color: var(--swatchBorder);
    content: "";
  }

  /* active */
  &::after {
    @apply absolute inset-[-3px] rounded-full border border-transparent opacity-0 transition-opacity duration-200;
    content: "";

    .is-active & {
      @apply border-pageText opacity-100;

      .is-inverted & {
        @apply border-pageBG;
      }
    }

    li:not(.is-soldout):not(.is-active) button:hover & {
      @apply border-pageText opacity-50;
    }

    .is-soldout & {
      @apply -inset-1 opacity-100 border-transparent;
      background: linear-gradient(45deg,transparent calc(50% - 1px),var(--pageText),transparent calc(50% + 1px)), linear-gradient(-45deg,transparent calc(50% - 1px),var(--pageText),transparent calc(50% + 1px));
    }
  }
}